<hz-page-header header="{$ 'Search' | translate $}">
  <p translate>
    Find your cloud resources by selecting specific facets or by specifying
    full text search queries.
    <sl-search-syntax></sl-search-syntax>
  </p>
</hz-page-header>
<div>
  <hz-magic-search-context ng-controller="searchlight-ui.table.searchTableController as table"
                           client-full-text-search="false"
                           filter-facets="table.searchFacets">
    <div class="row">
      <div class="searchlight-table-preamble col-xs-12">
        <hz-magic-search-bar class="hz-magic-search-bar"></hz-magic-search-bar>
        <div class="searchlight-favorite">
          <div class="btn-group">
            <button type="button"
                    class="btn btn-default dropdown-toggle ng-binding"
                    data-toggle="dropdown"
                    aria-expanded="false">
              <span class="fa fa-star-o" aria-hidden="true"></span>
            </button>
            <ul class="dropdown-menu">
              <li>
                <button class="btn btn-primary"
                        href="#"
                        ng-click="table.searchSettings.addLastQueryToFavorites()"
                        translate>
                  Add Favorite
                </button>
              </li>
              <li>
                <button class="btn btn-default"
                        href="#"
                        ng-click="table.searchSettings.manageFavoriteQueries()"
                        translate>
                  Manage Favorites
                </button>
              </li>
              <li class="divider"></li>
              <li ng-repeat="(name, query) in table.searchSettings.settings.queries.favorites track by name">
                <a href="#"
                   ng-click="table.applyFavoriteQuery(query)">
                  {$ name $}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="searchlight-filter">
          <button
                  class="btn btn-default"
                  ng-click="table.searchSettings.open()">
            <span class="fa fa-filter" aria-hidden="true"></span>
          </button>
        </div>
        <div class="searchlight-play-pause">
          <button
                  class="btn btn-default"
                  ng-click="table.toggleLiveSearch()"
                  tooltip="{$ table.playPauseTooltip() $}"
                  tooltip-placement="top"
                  tooltip-popup-delay="500"
                  tooltip-trigger="mouseenter">
            <span class="fa"
                  ng-class="table.isLiveSearch() ? 'fa-pause' : 'fa-play'"></span>
          </button>
        </div>
        <actions class="searchlight-table-actions"
                 allowed="table.globalActions"
                 type="row">
        </actions>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4">
        <span class="text-info" ng-cloak>{$ table.displaying() $}</span>
      </div>
    </div>

    <table
            hz-table ng-cloak
            st-magic-search
            st-table="table.hits"
            st-safe-src="table.hitsSrc"
            class="table table-striped table-hover table-rsp table-detail table-searchlight-search-results">
      <thead>
      <tr>
        <th colspan="100" class="search-header">
        </th>
      </tr>

      <tr>
        <!--
          Please note, search result sorting should not be done client side.
          Searchlight will provide the proper default sorting based on search
          result scoring.
        -->
        <th class="expander"></th>


        <th class="rsp-p1" translate>Type</th>
        <th ng-if="table.searchSettings.settings.general.all_projects"
            class="rsp-p1"
            translate>
          Project
        </th>
        <th class="rsp-p1" translate>Name</th>
        <th class="rsp-p2" translate>Status</th>
        <th ng-if="!table.searchSettings.settings.general.all_projects"
            class="rsp-p2" translate>Visibility</th>
        <th class="rsp-p2" translate>Updated</th>
        <th ng-if="table.searchSettings.settings.highlighting.enabled"
            class="rsp-p2" translate>
          Field Matches
        </th>
        <!-- th class="rsp-p3" translate>Description</th -->
        <th class="actions_column" translate>Actions</th>
      </tr>
      </thead>

      <tbody>

      <tr ng-if='table.queryResponse.error'>
        <td colspan="100%" translate>
          {$ table.queryResponse.statusCode | slQueryStatus $}
        </td>
      </tr>

      <tr ng-if='!table.queryError'
          class="summary-row"
          ng-repeat-start="hit in table.hits track by table.getSearchlightKey(hit)">

        <td class="expander">
          <span class="fa fa-chevron-right"
                hz-expand-detail
                duration="200">
          </span>
        </td>

        <!-- TODO Truncate not working because not in fixed container -->
        <!-- TODO ng-cloak not working -->
        <td class="rsp-p1 truncate">{$ hit._type | slResourceLabeler $}</td>
        <td ng-if="table.searchSettings.settings.general.all_projects"
            class="rsp-p1">
        <span tooltip="{$ hit._source.project_id $}"
              tooltip-placement="top"
              tooltip-popup-delay="500"
              tooltip-trigger="mouseenter">
          {$ hit._source.project_id | slKeystoneProjectName | noValue$}
        </span>
        </td>

        <td ng-cloak class="rsp-p1">
          <a ng-href="{$ hit | slResourceUrl $}">
            <sl-search-highlighter hit="hit"
                                   field="'name'"
                                   default-value="hit._source.name || hit._source.id | noValue">
            </sl-search-highlighter>
          </a>
        </td>

        <td class="rsp-p2">
          <div ng-if="table.itemInTransition(hit)"
              class="progress-text horizon-loading-bar">
            <div class="progress progress-striped active">
              <div class="progress-bar"></div>
            </div>
          </div>
          {$ hit._source.status | slCommonStatus | noValue $}
        </td>

        <td ng-if="!table.searchSettings.settings.general.all_projects"
            class="rsp-p2">
        <span tooltip="{$ 'Visibility is based on derived data. If Owned by Me, please inspect the resource to determine sharing status.' | translate $}"
              tooltip-placement="top"
              tooltip-popup-delay="500"
              tooltip-trigger="mouseenter">
          {$ hit._type | slCommonVisibility: hit._source:table.userSession.project_id | noValue $}
        </span>
        </td>

        <td class="rsp-p2">{$ hit._source.updated_at | date:'short' | noValue
          $}
        </td>
        <td ng-if="table.searchSettings.settings.highlighting.enabled"
            class="rsp-p2">
          <ul ng-if="hit.highlight"
              class="list-unstyled"
              ng-repeat="(field, value) in hit.highlight">
            <li ng-if="!field.endsWith('.raw')">
              {$ hit._type | slResourceLabeler: field $}
            </li>
          </ul>
          <div ng-if="!hit.highlight" translate>-</div>
        </td>
        <!-- td class="rsp-p3 truncate">
          <sl-search-highlighter hit="hit"
                                 field="'description'"
                                 default-value="hit._source.description | noValue">
          </sl-search-highlighter>
        </td -->

        <td class="actions_column">
          <actions
            ng-hide="hit.dirty"
            allowed="table.registry.getResourceType(hit._type).itemActions"
            type="row"
            item="hit._source"
            result-handler="table.actionResultHandler">
          </actions>
          <!--
          <span
            ng-show="hit.dirty"
            class="fa fa-spinner fa-spin fa-lg">
          </span>
          -->
          <div ng-if="hit.dirty"
              class="progress-text horizon-loading-bar">
            <div class="progress progress-striped active">
              <div class="progress-bar"></div>
            </div>
          </div>
        </td>

      </tr>

      <tr ng-repeat-end class="detail-row">
        <!--
          Detail-row:
          Contains detailed information on this item.
          Can be toggled using the chevron button.
          Ensure colspan is greater or equal to number of column-headers.
        -->
        <td class="detail" colspan="100">
          <sl-drawer
             hit="hit"
             item="hit._source"
             template-url="table.getSummaryTemplateUrl(hit._type)">
          </sl-drawer>
        </td>
      </tr>

      </tbody>

      <tfoot>
        <tr>
          <td colspan="100">
            <div st-pagination=""
                 st-items-by-page="table.searchSettings.settings.general.pageSize">
            </div>
            <div ng-if="table.resultsExceedLimit">
              <span class="text-info" ng-cloak translate>
                Results exceeds pagination limit. Please refine your search or
                increase the limit setting.
              </span>
            </div>
          </td>
        </tr>
      </tfoot>
    </table>
  </hz-magic-search-context>
</div>
